<template>
  <div class="auto select-overspread">
    <modal :show.sync="show"  v-ref:modal large backdrop="false" >
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="cancel"><span>&times;</span></button>
        <h3 class="modal-title">精确查询条件</h3>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="flex">
          <!-- 操作信息 -->
          <record-info v-show = "tabactive.record__tab === true" v-ref:record></record-info>
          <!-- 档案信息 -->
          <user-info v-show = "tabactive.userinfo__tab === true" v-ref:userinfo></user-info>
          <!-- 收费信息 -->
          <sell-gas-info  v-show = "tabactive.sellinggas__tab === true" v-ref:sellinggas></sell-gas-info>
          <!-- 抄表信息 -->
          <hand-plan-info  v-show = "tabactive.handplan__tab === true" v-ref:handplan></hand-plan-info >
          <!-- 抄费信息 -->
          <hand-sell-info  v-show = "tabactive.handsell__tab === true" v-ref:handsell></hand-sell-info >
          <!-- 换表信息 -->
          <change-meter-info  v-show = "tabactive.changemeter__tab === true" v-ref:changemeter></change-meter-info>
          <!-- 过户信息 -->
          <transfer-info  v-show = "tabactive.transfer__tab === true" v-ref:transfer></transfer-info>
          <!-- 冲正信息 -->
          <correctrecord-info  v-show = "tabactive.correctrecord__tab === true" v-ref:correctrecord></correctrecord-info>
          <!-- 补卡信息 -->
          <fillcard-info  v-show = "tabactive.fillcard__tab === true" v-ref:fillcard></fillcard-info>
          <!-- 补气信息 -->
          <fillgas-info  v-show = "tabactive.fillgas__tab === true" v-ref:fillgas></fillgas-info>
          <!-- 其他收费信息 -->
          <othercharge-info  v-show = "tabactive.othercharge__tab === true" v-ref:othercharge></othercharge-info>
          <!-- 撤销信息 -->
          <recordcancel-info  v-show = "tabactive.recordcancel__tab === true" v-ref:recordcancel></recordcancel-info>
          <!-- <info-change-info  v-show = "tabactive.infochange__tab === true" v-ref:infochange></info-change-info> -->
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary"  @click='confirm()'>提交</button>
        <button type="button" class="btn btn-default" @click='cancel()'>取消</button>
      </footer>
    </modal>
  </div>
</template>
<script>
export default {
  title: '',
  props: ['show', 'tabactive'],
  data () {
    return {
      model: {},
      conditions: {},
      param: {condition: '', conditionArr: []},
      tablename: 'userinfo'
    }
  },
  watch: {
    'param.condition' (val) {
      this.$emit('toggle', this.param)
    },
    'param.conditionArr' (val) {
      this.model[this.tablename] = Object.assign({}, this.$refs[this.tablename].$refs.cri.model)
    }
  },
  methods: {
    insertCondition (arr, con) {
      for (var key in this.tabactive) {
        if (this.tabactive[key] === true) {
          this.tablename = key.split('__')[0]
          let tablename = key.split('__')[0]
          if (this.isChange(this.model[tablename], this.$refs[tablename].$refs.cri.model) && this.$refs[tablename]) {
            this.$refs[tablename].$refs.cri.$dispatch('show-con')
            this.$refs[tablename].$refs.cri.search()
            this.model[tablename] = Object.assign({}, this.$refs[tablename].$refs.cri.model)
          }
        }
      }
    },
    isChange (oldVal, newVal) {
      if (JSON.stringify(oldVal) === JSON.stringify(newVal)) {
        return false
      } else {
        return true
      }
    },
    cancel  () {
      this.$emit('toggle')
    },
    confirm () {
      this.insertCondition()
      this.$emit('toggle')
    },
    clearData () {
      this.model = {}
      this.$refs.record.reset()
      this.$refs.userinfo.reset()
      this.$refs.sellinggas.reset()
      this.$refs.handplan.reset()
      this.$refs.changemeter.reset()
      this.$refs.transfer.reset()
      this.$refs.correctrecord.reset()
      this.$refs.fillcard.reset()
      this.$refs.fillgas.reset()
    }
  },
  events: {
    'condition-changed' (val) {
      this.param.condition = val.condition
    },
    'showcond' (val) {
      this.param.conditionArr = val
    }
  }
}

</script>
